<template>
  <div class="plan-filing bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-4">灾难后果模拟分析</h2>


    <!-- Search Bar -->
    <div class="bg-card text-card-foreground p-4 mb-4 rounded shadow">

      <QueryForm :model="search" :formItems="formItems" @search="searchPlans" @reset="resetSearch">
        <template #extra>
          <span style="font-size: var(--el-form-label-font-size);color: var(--el-text-color-regular);">模拟时间：</span>
          <input type="date" class="input-time-query" v-model="search.START_TIME">&nbsp;&nbsp;~&nbsp;&nbsp;
          <input type="date" class="input-time-query" v-model="search.END_TIME">
        </template>
      </QueryForm>
    </div>

    <!-- Action Buttons -->
    <div class="mb-4 space-x-2">
      <button @click="exportData(planData, '灾难后果模拟分析')"
        class="bg-secondary text-secondary-foreground px-4 py-2 rounded">导出</button>
    </div>

    <!-- Data Table -->
    <div class="bg-card text-card-foreground my-6 rounded shadow-md">
      <el-table v-loading="loading" :data="displayedPlanData" style="width: 100%" ref="table" align="center"
        class="data-table" :header-cell-style="headerCellStyle">
        <el-table-column prop="Simulate_Code" label="模拟编码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="Simulate_Time" label="模拟时间" header-align="center" align="center">
          <template #default="scope">
            {{ dayjs(scope.row.Simulate_Time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>

        </el-table-column>
        <el-table-column prop="Model_Result" label="模型分析结果" header-align="center" align="center"></el-table-column>
        <el-table-column prop="Domino_Effect" label="多米诺效应分析结果" header-align="center" align="center"></el-table-column>
        <el-table-column prop="Secondary_Disaster" label="次生衍生灾害分析结果" header-align="center"
          align="center"></el-table-column>
        <el-table-column prop="Acciden_Code" label="关联事故编号" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- Pagination -->

    <Pagination v-if="planData.length" :tableData="planData" @alltabledata="alltabledata" />
    <!--  -->
    <el-dialog class="dialog-from" v-model="isViewDialogOpen" title="记录详情" destroy-on-close align-center
      :before-close="closeViewDialog">
      <div class="body-item">
        <div class="tablename">
          <div
            style="width: 10px; height: 10px; background-color:rgba(2, 125, 180, 1);margin-right: 10px;border:1px solid;">
          </div>
          <span>基本信息</span>
        </div>
        <div class="box-content">
          <div class="grid grid-cols-3 gap-4">
            <div>
              <strong class="no-wrap">模拟编码:</strong>
              <span class="auto-wrap">{{ selectedItem.Simulate_Code }}</span>
            </div>
            <div>
              <strong class="no-wrap">模拟时间:</strong>
              <span class="auto-wrap">{{ dayjs(selectedItem.Simulate_Time).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </div>
            <div>
              <strong class="no-wrap">关联事故编号:</strong>
              <span class="auto-wrap">{{ selectedItem.Acciden_Code }}</span>
            </div>
          </div>
          <!--  -->
          <div style="margin:10px 0">
            <strong class="no-wrap">模型分析结果：</strong>
            <span class="auto-wrap">{{ selectedItem.Model_Result }}</span>
          </div>
          <!--  -->
          <div style="margin:10px 0">
            <strong class="no-wrap">多米诺效应分析结果：</strong>
            <span class="auto-wrap">{{ selectedItem.Domino_Effect }}</span>
          </div>
          <!--  -->
          <div style="margin:10px 0">
            <strong class="no-wrap">次生衍生灾害分析结果：</strong>
            <span class="auto-wrap">{{ selectedItem.Secondary_Disaster }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { exportData } from '#/utils/exportfile.js'
import { dayjs } from "element-plus"
const apiBaseUrl = ref(proxy.$currentUrl + '/api/rescue-simulate')
// 搜索相关
const search = ref({

  Simulate_Code: '',
  START_TIME: '',
  END_TIME: ''
})
const formItems = ref([
  {
    label: '模拟编码:',
    model: 'Simulate_Code',
    type: 'input',
    placeholder: '请输入',
  },
])
const rowKey = (row) => row.ID
const loading = ref(false)
const handleSelectionChange = (selected) => {
  selectedIds.value = selected
}
const headerCellStyle = {
  height: '30px', // 设置表头高度
  lineHeight: '30px', // 设置行高以垂直居中
  backgroundColor: '#f2f2f2', // 可选：设置背景颜色
  // fontSize: '16px', // 可选：设置字体大小
}
// 数据相关
const planData = ref([])
const isViewDialogOpen = ref(false)
const selectedItem = ref(null)
const selectedIds = ref([])
const displayedPlanData = ref([])
const alltabledata = (data) => {
  displayedPlanData.value = data

}
// API 调用函数
const searchPlans = async () => {
  try {
    const response = await axios.get(`${apiBaseUrl.value}`, { params: search.value })
    planData.value = response.data.map(app => ({ ...app, selected: false }))
    selectedIds.value = []
  } catch (error) {
    console.error('搜索预案记录失败:', error)
    alert('搜索预案记录失败')
  }
}
// 事件处理函数
const resetSearch = () => {
  search.value = {
    Simulate_Code: '',
    START_TIME: '',
    END_TIME: ''
  }
  searchPlans()
}


const viewDetails = (item) => {
  selectedItem.value = { ...item }
  isViewDialogOpen.value = true
}

const closeViewDialog = () => {
  isViewDialogOpen.value = false
  selectedItem.value = {}
}

// 生命周期钩子
onMounted(() => {
  searchPlans()
})

</script>

<style scoped>
/* 移除所有现有的样式 */
</style>
